/* eslint-disable vue/valid-v-for */
<template>
  <d2-container>
    <el-row>
      <div>
        <el-radio v-model="formSelect.value0" label="2" border>科目二</el-radio>
        <el-radio v-model="formSelect.value0" label="3" border>科目三</el-radio>
      </div>
    </el-row>
    <br />
    <el-row>
      <el-col :span="2">
        <span class="myspan"> 教练姓名 ：</span>
      </el-col>
      <el-col :span="4">
        <div class="demo-input-suffix">
          <el-input
            placeholder="请输入教练姓名"
            prefix-icon="el-icon-search"
            v-model="formSelect.value1"
          >
          </el-input>
        </div>
      </el-col>
      <el-col :span="2">
        <span class="myspan"> 日期 ：</span>
      </el-col>
      <el-col :span="4">
        <el-date-picker
          v-model="formSelect.value2"
          align="right"
          type="date"
          placeholder="选择日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-col>
      <el-col :span="2">
        <span class="myspan"> 上课方案 ：</span>
      </el-col>
      <el-col :span="4">
        <el-select
          v-model="formSelect.value3"
          @focus="getPeriod"
          placeholder="请输入关键词"
        >
        <!-- 数据 options 中的 JSON {"periodName":"冬时段","id":"2"} -->
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.periodName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <!-- 绑定搜索 -->
        <el-button
          class="d2-ml-20"
          type="primary"
          icon="el-icon-search"
          @click="getClassTime"
          >搜索</el-button
        >
      </el-col>
    </el-row>
    <h1>请选择排课方案</h1>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
            v-for="time in classTime"
            :key="time"
            :label="time"
            :value="time" width="80"></el-table-column>
    </el-table>
  </d2-container>
</template>

<script>

export default {
  data () {
    return {
      // 日期
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [
          {
            text: '今天',
            onClick (picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '昨天',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      // ajax 请求 查询所有的教程安排
      options: [
        { periodName: '夏时段', id: '1' },
        { periodName: '夏时段', id: '3' }
      ],
      // 教案具体的时间
      classTime: [
        '1', '2'
      ],

      // 表单
      // 科目三还是科目二
      // 教练的名字
      // 时间是什么时候
      // 排课方案
      // 表里面的数据
      formSelect: {

        value0: '',

        value1: '',

        value2: '',

        value3: ''
      },

      tableData: [{

      }]
    }
  },
  methods: {
    // 查询所有的教学方案
    async getPeriod () {
      try {
        const res = await this.$api.SYS_SELECT_ALL_PERIOD()
        console.log(res)
        this.$data.options = res.data
        console.log(this.$data.classTime)
      } catch (error) {
        console.log(error)
      }
    },
    // 查询教学方案具体的课程安排 和老师
    async getClassTime () {
      try {
        const query = this.$data.formSelect
        const res = await this.$api.SYS_SELECT_CLASST_TIME(query)
        this.$data.classTime = JSON.parse(res.data)
        console.log(res)
        console.log(this.$data.classTime)
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>
<style>
.myspan {
  margin-left: 20px;
  line-height: 40px;
  text-align: center;
}
</style>
